<script setup>
import { RouterLink, RouterView } from 'vue-router'
import {onMounted, ref} from 'vue'

let qwe = ref("statistics");
//统计
let ImageUrl=ref('../src/assets/Desktop/图标/统计.png');
let ImageUrll=ref('../src/assets/Desktop/图标/统计 (1).png');
//管理员
let ImageUrl1=ref('../src/assets/Desktop/图标/管理员.png');
let ImageUrl1l=ref('../src/assets/Desktop/图标/管理员 (1).png');
//用户管理
let ImageUrl2=ref('../src/assets/Desktop/图标/用户管理.png');
let ImageUrl2l=ref('../src/assets/Desktop/图标/用户管理 (1).png');
//商家管理
let ImageUrl3=ref('../src/assets/Desktop/图标/商家管理.png');
let ImageUrl3l=ref('../src/assets/Desktop/图标/商家管理 (1).png');
//商品管理
let ImageUrl4=ref('../src/assets/Desktop/图标/商品管理.png');
let ImageUrl4l=ref('../src/assets/Desktop/图标/商品管理 (1).png');
//积分管理
let ImageUrl5=ref('../src/assets/Desktop/图标/积分管理.png');
let ImageUrl5l=ref('../src/assets/Desktop/图标/积分管理 (1).png');
//会员等级管理
let ImageUrl6=ref('../src/assets/Desktop/图标/会员等级管理.png');
let ImageUrl6l=ref('../src/assets/Desktop/图标/会员等级管理 (1).png');
//客服管理
let ImageUrl7=ref('../src/assets/Desktop/图标/客服管理.png');
let ImageUrl7l=ref('../src/assets/Desktop/图标/客服管理 (1).png');
//用户第三方管理
let ImageUrl8=ref('../src/assets/Desktop/图标/在线人数.png');
let ImageUrl8l=ref('../src/assets/Desktop/图标/在线人数 (1).png');
//国家管理
let ImageUrl9=ref('../src/assets/Desktop/图标/国家管理.png');
let ImageUrl9l=ref('../src/assets/Desktop/图标/国家管理 (1).png');
//收藏管理
let ImageUrl10=ref('../src/assets/Desktop/图标/收藏管理-01.png');
let ImageUrl10l=ref('../src/assets/Desktop/图标/收藏管理-01 (1).png');
//系统设置
let ImageUrl11=ref('../src/assets/Desktop/图标/系统设置.png');
let ImageUrl11l=ref('../src/assets/Desktop/图标/系统设置 (1).png');
function setActive(linkNumber) {
  qwe.value = linkNumber;
}

</script>
<template>
  <div class="common-layout">
    <el-container>
      
       <div class="top">
           <div class="top-left">
               <p>优购街后台管理平台</p>
           </div>
           <div class="top-right">
               <img src="../assets/Desktop/图标/商品管理.png" alt="" class="imgs">
               <span>白眉大侠</span>
               <img src="../assets/Desktop/图标/退出.png" alt="" class="imgs1">
           </div>
       </div>
   
      <el-container>
        <el-aside width="200px">
         <div class="nav">
            <RouterLink to="/statistics" exact active-class="active-link" @click="setActive('statistics')">
              <img :src="qwe === 'statistics'? ImageUrll : ImageUrl " />
              <span>统计</span>
            </RouterLink>

            <RouterLink to="/administrator" exact active-class="active-link" @click="setActive('administrator')">
              <img :src="qwe === 'administrator'? ImageUrl1l : ImageUrl1" alt="">
            <span>管理员</span>
            </RouterLink>

            <RouterLink to="/UserManagement" exact active-class="active-link" @click="setActive('UserManagement')">
              <img :src="qwe === 'UserManagement' ? ImageUrl2l : ImageUrl2" alt="">
            <span>用户管理</span>
          </RouterLink>

            <RouterLink to="/MerchantManagement" exact active-class="active-link" @click="setActive('MerchantManagement')">
              <img :src="qwe === 'MerchantManagement' ? ImageUrl3l : ImageUrl3" alt="">
              <span>商家管理</span>
            </RouterLink>

          <RouterLink to="/ProductManagement" exact active-class="active-link" @click="setActive('ProductManagement')">
            <img :src="qwe === 'ProductManagement' ?ImageUrl4l:ImageUrl4 " alt="">
            <span>商品管理</span>
          </RouterLink>

          <RouterLink to="/PointsManagement" exact active-class="active-link" @click="setActive('PointsManagement')">
            <img :src="qwe === 'PointsManagement' ? ImageUrl5l : ImageUrl5" alt="">
            <span>积分管理</span>
          </RouterLink>

            <RouterLink to="/MenbershipManagement" exact active-class="active-link" @click="setActive('MenbershipManagement')">
              <img :src="qwe ==='MenbershipManagement'?ImageUrl6l:ImageUrl6" alt="">
            <span>会员等级管理</span>
          </RouterLink>

            <RouterLink to="/CustomerService" exact active-class="active-link" @click="setActive('CustomerService')">
              <img :src="qwe === 'CustomerService' ? ImageUrl7l : ImageUrl7" alt="">
            <span>客服管理</span>
          </RouterLink>

          <RouterLink to="/ThirdPartyManagemen" exact active-class="active-link" @click="setActive('ThirdPartyManagement')">
            <img :src="qwe === 'ThirdPartyManagement'? ImageUrl8l:ImageUrl8" alt="">
            <span>用户第三方管理</span>
          </RouterLink>
        
            <RouterLink to="/CountryManagement" exact active-class="active-link" @click="setActive('CountryManagement')"> 
              <img :src="qwe === 'CountryManagement'? ImageUrl9l:ImageUrl9" alt="">
            <span>国家管理</span>
          </RouterLink>

            <RouterLink to="/FavoriteManagement" exact active-class="active-link" @click="setActive('FavoriteManagement')">
              <img :src="qwe === 'FavoriteManagement'? ImageUrl10l:ImageUrl10" alt="">
            <span>收藏管理</span>
          </RouterLink>

            <RouterLink to="/SystemSettings" exact active-class="active-link" @click="setActive('SystemSettings')">
              <img :src="qwe === 'SystemSettings'? ImageUrl11l:ImageUrl11" alt="">
            <span>系统设置</span>
          </RouterLink>
         </div>
        </el-aside>
        <el-main style="height: 100%;">
           <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style lang="less" scoped>
.common-layout{
  width: 100%;
  height: 100%;
}
.nav{
  width: 160px;
  height: 90%; 
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-top: 30px;
}
:deep(.el-main){
  width: 100%;
  height: 100%;
  padding: 8px 0 0 15px ;
}
:deep(.el-container.is-vertical){
  width: 100%;
  height: 100%;
}
:deep(.el-container){
  width: 100%;
  height: 90%;
  position: fixed;
  top: 10%;
  left: 0;
}
:deep(.el-aside){
  display: flex;
  justify-content: center;
}
a{
  display: inline-block;
  width: 100%;
  height: 6%;
  display: flex;
  align-items: center;
  padding-left: 20px;
  text-decoration: none;
  color: #000;
 }

 .active-link{
  display: inline-block;
  width: 100%;
  height: 6%;
  display: flex;
  align-items: center;
  padding-left: 20px;
  border-radius: 10px;
  background: linear-gradient(to right, #5c78cc, #0099ff);
  color: #fff;
 }
img{
  float: right;
  width: 24px;
  height: 24px;
  margin-right: 3px;
}

:deep(.el-col-5){
  display: flex;
  align-items: center;
}
.top{
     width: 100%;
     height: 10%;
     box-shadow: 0 2px 20px 1px rgba(0, 0, 0, 0.2);
     display: flex;
     position: fixed;
     top: 0;
     left: 0;
     .top-left{
        width: 90%;
        height: 70px;
        line-height: 70px;
        box-sizing: border-box;
        padding-left: 40px;
        font-weight: 600;
     }
     .top-right{
        width: 16%;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        .imgs{
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
        .imgs1{
            width: 30px;
            height: 30px;
            margin-left: 13px;
        }
     }
   }
</style>
